<template>
  <a-modal
    :visible='visible'
    title="行程轨迹详情"
    width="100%"
    :footer="null"
    :mask-closable='false'
    :destroy-on-close='true'
    :style="{ top: '0px' }"
    @update:visible='updateVisible'
  >
    <div class="ele-body">
      <div class="block-interval">
        <a-card title="行程信息" class="card-width">
          <a-descriptions bordered :column="3">
            <a-descriptions-item label="行程开始时间">{{data.startAt}}</a-descriptions-item>
            <a-descriptions-item label="行程开始经纬度">{{data.startBdLongitude}},{{data.startBdLatitude}}</a-descriptions-item>
            <a-descriptions-item label="耗时(秒)">{{data.duration}}</a-descriptions-item>
            <a-descriptions-item label="行程结束时间">{{data.endAt}}</a-descriptions-item>
            <a-descriptions-item label="行程结束经纬度">{{data.endBdLongitude}},{{data.endBdLatitude}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
      <div>
        <baidu-map
          ak="OsoBFa0ZqPGS0UpqiiF0rVHsBp0kfQ5F"
          :center="pathCenter"
          :zoom="zoom" style="height: 100vh;">
          <bm-polyline :path="paths"
                       :strokeWeight="3"
                       :strokeOpacity="0"
          > </bm-polyline>
          <bm-control>
            <button @click="reduceZoom()">缩小</button>
            <button @click="resumeZoom(13)">还原</button>
            <button @click="addZoom()">放大</button>
          </bm-control>
        </baidu-map>
      </div>

    </div>

  </a-modal>
</template>

<script>
import { BaiduMap, BmPolyline, BmControl } from 'vue-baidu-map-3x'
import moment from "moment";
import {VehicleRealtimeSpeedApi} from "@/api/property/vechile/VehicleRealtimeSpeedApi";

export default {
  name: 'VehicleManagerRunningstateManagerTriplogDataBmtravel',
  components: {
    BaiduMap,
    BmPolyline,
    BmControl
  },
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object
  },
  mounted() {
    if (this.data.startAt) {
      this.where.searchBeginTime = this.data.startAt
    }
    if (this.data.endAt) {
      this.where.searchEndTime = this.data.endAt
    }
    this.where.vehicleId = this.data.vehicleId;
    this.getPositoinTravelData();
  },
  data() {
    return {
      where : {"vehicleId" : this.data.vehicleId},
      paths : [],
      pathCenter : {lng: 116.404, lat: 39.915},
      zoom : 15,
    };
  },
  methods: {
    resumeZoom (level) {
      this.zoom = level
    },
    addZoom () {
      if (this.zoom < 19) {
        this.zoom = this.zoom + 1;
      }
    },
    reduceZoom () {
      if (this.zoom >= 3) {
        this.zoom = this.zoom - 1;
      }
    },
    reset() {
      this.where.searchBeginTime = '';
      this.where.searchEndTime = '';
      this.where.vehicleId = this.data.vehicleId;
      this.paths = [];
    },

    reload() {
      this.getPositoinTravelData();
    },
    getPositoinTravelData() {
      let that = this;
      let params = {
        searchBeginTime : moment().subtract(1, 'h').format('YYYY-MM-DD HH:mm:ss'),
        searchEndTime : moment().format('YYYY-MM-DD HH:mm:ss'),
        vehicleId: this.where.vehicleId,
        orderBy : "sendtime",
        sortBy : "asc"
      };
      params.searchBeginTime = this.where.searchBeginTime;
      params.searchEndTime = this.where.searchEndTime;
      VehicleRealtimeSpeedApi.travelList(params).then(res => {
        let _paths = [];
        if (res.data && res.data.length > 0) {
          let centerSet = 0;
          res.data.forEach(function (item, index) {
            if (item.gnssAccuracy == 1) {
              let formatItem = {
                lng: item.bdLongitude,
                lat: item.bdLatitude
              }
              if (centerSet == 0) {
                that.pathCenter = formatItem;
                centerSet = 1;
              }
              _paths.push(formatItem);
            }
          });
        }
        that.paths = _paths;
        console.log( that.paths);
      });
    },
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>
